<template>
	<view>
		<view class="nav">
			<view class="nav-left">
				<scroll-view scroll-y :style="'height:'+height+'px'">
					<view class="nav-left-item" v-for="(item,index) in categoryList" @click="categoryClickMain(item,index)" :key="index"
					 :style="index==categoryActive?'color:'+activeTextColor+';background-color:'+activeBackgroundColor:''">
						{{item[name]}}
					</view>
				</scroll-view>
			</view>
			<view class="nav-right">
				<view class="nav-right-title" v-if="classifyName">——<text style="color:#000;padding:10upx;">{{classifyName}}</text>——</view>
				<scroll-view scroll-y :scroll-top="scrollTop" @scrolltolower="tolower" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
					<view class="nav-right-item" v-for="(item,index2) in subCategoryList" :key="index2" @click="categoryClickSub(item)">
						<image :src="demoUrl + item[imageUrl]" mode="widthFix"/>
						<view style="padding: 6upx;">
							<view  class="nav-right-item-title">{{item[goodsName]}}</view>
							<view style="color: #FE6F75;">￥{{item[salesPrice]}}</view>
							<view style="color: #ddd;font-size: 24upx;" v-if="item[isDistri] === 1">分享赚￥{{parseInt(item[outone]*100)*parseInt(item[salesPrice]*100)/10000}}</view>
							<view style="color: #fff;font-size: 24upx;" v-else>.</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "category",
		inheritAttrs: true,
		data() {
			return {
				demoUrl:'',
				height: 0,
				scrollTop: 0,
				scrollHeight: 0,
				categoryActive: 0,
				activeStyle: {
					color: this.activeTextColor,
					backgroundColor: this.activeBackgroundColor
				}
			}
		},
		props: {
			defaultActive: {
				type: Number,
				default: 0
			},
			categoryList: {
				type: Array,
				default: () => {
					return null;
				}
			},
			//侧List
			subCategoryList: {
				type: Array,
				default: () => {
					return null;
				}
			},
			classifyName: {
				type: String,
				default: () => {
					return null;
				}
			},
			activeTextColor: {
				type: String,
				default: '#FEE3AE'
			},
			activeBackgroundColor: {
				type: String,
				default: '#000'
			},
			name: {
				type: String,
				default: 'name'
			},
			goodsName: {
				type: String,
				default: 'goodsName'
			},
			imageUrl: {
				type: String,
				default: 'imageUrl'
			},
			salesPrice: {
				type: Number,
				default: 'salesPrice'
			},
			outone: {
				type: Number,
				default: 'outone'
			},
			isDistri: {
				type: Number,
				default: 'isDistri'
			},
			salesPrice: {
				type: Number,
				default: 'salesPrice'
			},
			//主分类点击事件
			categoryMainClick: {},
			//子分类点击事件
			categorySubClick: {}
		},
		methods: {
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(category, index) {
				this.$emit('categoryMainClick',category)
				this.categoryActive = index;
				this.scrollTop = -this.scrollHeight * index;
			},
			categoryClickSub(category) {
				this.$emit('categorySubClick',category)
			},
			tolower() {
				this.$emit('tolower')
			}
		},
		mounted() {
			this.categoryActive = this.defaultActive
			uni.getSystemInfo({
				success: res => {
					this.height = res.screenHeight-174;
				}
			})
		},
		watch: {
			subCategoryList(newValue, oldValue) {
				
			}
		},
	}
</script>

<style scoped>
	.nav {
		display: flex;
		width: 100%;
		background-color: #fff;
	}
	.nav-left {
		width: 30%;
		box-sizing: border-box;
	}
	.nav-left-item {
		border-radius: 5px;
		height: 50px;
		font-size: 14px;
		display: flex;
		font-weight: bold;
		align-items: center;
		justify-content: center;
	}
	.nav-right {
		width: 70%;
		background-color: #F2F2F2;
		padding: 0 5upx 5upx 5upx;
		box-sizing: border-box;
	}
	.nav-right-title{
		padding:10upx;
		background-color: #fff;
		color:#eee;
		text-align: center;
	}
	.nav-right-item {
		box-sizing: border-box;
		background-color: #fff;
		width: 48%;
		display: inline-block;
		margin: 5upx;
		font-size: 13px;
		border-radius: 10upx;
	}
	.nav-right-item image {
		width: 100%;
		max-height: 280upx;
	}
	.nav-right-item-title{
		width: 100%;
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
	}
	.active {
		color: #F24544;
	}
	.padding {
		height: var(--status-bar-height);
		width: 100%;
		top: 0;
		position: fixed;
		background-color: #F24544;
	}
</style>
